<template>
  <div>
    <h2>嵌套和索引</h2>
    <table id="table1">
      <thead>
      <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
      </thead>
      <tbody>
      <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
      <tr><td>  4</td><td>  5</td><td>  6</td><td>  7</td></tr>
      <tr><td>  8</td><td>  9</td><td> 10</td><td> 11</td></tr>
      <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
      </tbody>
    </table><br />
    <h2>嵌套和数据</h2>
    <table id="table2">
      <thead>
      <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
      </thead>
      <tbody>
      <tr><td>  -</td><td>  -</td><td>  -</td><td>  -</td></tr>
      <tr><td>  -</td><td>  -</td><td>  -</td><td>  -</td></tr>
      <tr><td>  -</td><td>  -</td><td>  -</td><td>  -</td></tr>
      <tr><td>  -</td><td>  -</td><td>  -</td><td>  -</td></tr>
      </tbody>
    </table><br />
  </div>
</template>

<script>
import * as d3 from "d3";
export default {
  name: "s5_nested",
  metaInfo: {
    title: "嵌套",
  },
  data: function() {
    return {
      data: []
    }
  },
  created() {
  },
  mounted() {
    d3.select("#table1")
        .selectAll("tbody tr")
        .selectAll("td")
        .style("color", (d, i) => i === 1 ? "red" : null)  // 将所有组的第一个 td 设置成红色

    let matrix = [
      [ 0,  1,  2,  3],
      [ 4,  5,  6,  7],
      [ 8,  9, 10, 11],
      [12, 13, 14, 15],
    ];
    d3.select("#table2")
        .selectAll("tbody tr")
        .data(matrix)
        .selectAll("td")
        // eslint-disable-next-line no-unused-vars
        .data((d, i) => d) // d is matrix[i]
        .text(d => d)
  }
}
</script>

<style scoped>

</style>
